/*
 * @Descripttion:
 * @version:
 * @Author: wujq
 * @Date: 2023-07-26 15:07:09
 * @LastEditors: Andy
 * @LastEditTime: 2023-08-08 14:03:24
 */
import React, { useState, useRef, useEffect } from 'react';
import './index.less';
import _ from 'lodash';
import PropTypes from 'prop-types';
import { Select } from 'antd';
import { getStaffList } from '@api/user';
function useDidUpdateEffect(fn, inputs) {
  const didMountRef = useRef(false);
  useEffect(() => {
    if (didMountRef.current) {
      fn();
    } else {
      didMountRef.current = true;
    }
  }, inputs);
}
const UserSelect = props => {
  const { onChange, defaultValue } = props;
  const [selectLoading, setSelectLoading] = useState(false);
  const [staffScreachList, setStaffScreachList] = useState([]);
  const [paginationCount, sePaginationCount] = useState(0);
  const [staffPagination, setStaffPagination] = useState({
    page: 1,
    pageSize: 10
  });
  const loadStafflist = data => {
    const { page, pageSize, search } = data;
    setSelectLoading(true);
    getStaffList({ page, pageSize, search })
      .then(res => {
        const stafflist = _.get(res, 'data.data.list', []);
        let list = staffScreachList.concat(stafflist);
        setStaffScreachList(list);
        sePaginationCount(_.get(res, 'data.data.count', 0));
      })
      .finally(() => {
        setSelectLoading(false);
      });
  };
  const onSearch = e => {
    setStaffScreachList([]);
    setStaffPagination({ ...staffPagination, search: e, page: 1 });
  };
  const scrollEnd = e => {
    const { target } = e;
    e.persist();
    // 滚动 触底 看接口是否还有剩余的值没传过来
    if (target.scrollTop + target.offsetHeight + 1 >= target.scrollHeight) {
      const { page, pageSize } = staffPagination;
      if (page * pageSize < paginationCount) {
        setStaffPagination({
          ...staffPagination,
          page: page + 1
        });
      }
    }
  };
  useDidUpdateEffect(() => {
    if (staffPagination.page) {
      loadStafflist(staffPagination);
    }
  }, [staffPagination.page]);

  useDidUpdateEffect(() => {
    if (staffPagination.search) {
      loadStafflist({ page: 1, pageSize: 10, search: staffPagination.search });
    } else {
      loadStafflist({ page: 1, pageSize: 10, search: '' });
    }
  }, [staffPagination.search]);
  useEffect(() => {
    loadStafflist({ page: 1, pageSize: 10, search: '' });
  }, []);
  return (
    <Select
      showSearch
      placeholder="请输入管理员"
      defaultActiveFirstOption={false}
      showArrow={false}
      filterOption={false}
      notFoundContent={null}
      onSearch={onSearch}
      loading={selectLoading}
      onChange={onChange}
      defaultValue={defaultValue}
      dropdownRender={menu =>
        staffScreachList.length !== 0 ? (
          <>
            <p style={{ padding: 10, marginBottom: -10, fontWeight: 800 }}>
              所有用户({paginationCount})
            </p>
            {menu}
          </>
        ) : (
          <></>
        )
      }
      onPopupScroll={scrollEnd}
    >
      {staffScreachList.map(staff => (
        <Select.Option key={staff._id}>
          <p className="user-select-box">
            <p className="user-select-title">
              {[staff.nickname, staff.email, staff.telephone].filter(Boolean).join('/')}
            </p>
            {/* {staff.userOid ? (
              <span style={{ float: 'right' }}>已有用户账号</span>
            ) : null} */}
          </p>
        </Select.Option>
      ))}
    </Select>
  );
};
/* eslint-disable  camelcase */
UserSelect.propTypes = {
  onChange: PropTypes.func,
  defaultValue: PropTypes.string
};
/* eslint-enable */

export default UserSelect;
